<template>
  <div class="buyIn_wrap">
     <div class="top">
      <div class="options">
        <p class="condition" :class="{'select': optionsSelect === 0}" @click="optionsChange(0)">Newest<span class="iconfont icon-shaixuan"></span></p>
        <p class="condition" :class="{'select': optionsSelect === 1}" @click="optionsChange(1)">Sincerity<span class="iconfont icon-xiangshang"></span></p>
        <div class="condition filter">
          <span class="number_txt">Amount</span>
          <div class="pay_num">
            <input class="min input" type="number" placeholder="lowest" v-model="payInNum.min">
            <span class="pay_num_line">~</span>
            <input class="max input" type="number" placeholder="Highest" v-model="payInNum.max">
            <button class="search" @click="sureNumSubmit">Sure</button>
          </div>
        </div>
      </div>
    </div>
    <ul class="list_wrap" ref="scrollBox" v-if="optionsSelect === 0">
      <div class="inner_wrap" ref="scrollBoxInner">
        <li class="public_none_data" v-if="!list.length && isRequest">Orders with no satisfactory conditions</li>
        <li class="item_box" v-for="(item, index) in list" :key="index" v-else>
          <div class="item_top">
            <div class="top_left">
              <div class="img_wrap">
                <img :src="item.avatar" alt="Head portrait">
              </div>
              <span class="nick">{{item.username}}</span>
            </div>
            <div class="public_s_btn" @click="buy(index)">purchase</div>
          </div>
          <div class="content_wrap">
            <div class="content_left">
              <p class="price">{{item.point}}</p>
              <span class="price_txt">Sale amount({{item.area}})</span>
            </div>
            <div class="content_right">
              <p class="level">{{item.praise}}</p>
              <span class="level_txt">Good faith value</span>
            </div>
          </div>
        </li>
      </div>
    </ul>
    <ul class="list_wrap" ref="scrollBox" v-if="optionsSelect === 1">
      <div class="inner_wrap" ref="scrollBoxInner">
        <li class="public_none_data" v-if="!list1.length && isRequest1">Orders with no satisfactory conditions</li>
        <li class="item_box" v-for="(item, index) in list1" :key="index" v-else>
          <div class="item_top">
            <div class="top_left">
              <div class="img_wrap">
                <img :src="item.avatar" alt="Head portrait">
              </div>
              <span class="nick">{{item.username}}</span>
            </div>
            <div class="public_s_btn" @click="buy(index)">purchase</div>
          </div>
          <div class="content_wrap">
            <div class="content_left">
              <p class="price">{{item.point}}</p>
              <span class="price_txt">Sale amount({{item.area}})</span>
            </div>
            <div class="content_right">
              <p class="level">{{item.praise}}</p>
              <span class="level_txt">Good faith value</span>
            </div>
          </div>
        </li>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'buyIn',
  data () {
    return {
      optionsSelect: 0,
      optionsState: 1, // Transfer value
      option: {
        // Newest
        nomal: true,
        // Sincerity
        praise: false
      },
      // Quantity screening
      payInNum: {
        min: '',
        max: ''
      },
      // Load page
      isRequest: false, // Have you requested data?
      canRequest: true, // Can you request data, request lock?
      hasMoreData: true, // Do you have more data?
      isRequest1: false,
      canRequest1: true,
      hasMoreData1: true,
      page: 1,
      page1: 1,
      list: [],
      list1: [],
      isSameData: {
        min: '',
        max: ''
      },
      isSameData1: {
        min: '',
        max: ''
      },
      unit: ''
    };
  },
  beforeMount () {
    let area = localStorage.getItem('area');
    if (area) {
      area = JSON.parse(area);
      this.country = area.area;
      let reg = /[A-Z]+/g;
      this.unit = this.country.match(reg)[0];
    }
  },
  methods: {
    // Choice
    optionsChange (id) {
      this.optionsSelect = id;
      // time
      if (id === 0) {
        if ((!this.payInNum.min && !this.payInNum.max) || (this.isSameData.min === this.payInNum.min && this.isSameData.max === this.payInNum.max)) {
          return false;
        }
      } else if (id === 1) {
        if ((!this.payInNum.min && !this.payInNum.max) || (this.isSameData1.min === this.payInNum.min && this.isSameData1.max === this.payInNum.max)) {
          return false;
        }
      }
    },
    // Price interval selection
    sureNumSubmit () {
      if (this.payInNum.min < 0) {
        this.Toast('Interval unlawful');
      } else if ((this.HasData(this.payInNum.min) && this.HasData(this.payInNum.max) && (Number(this.payInNum.min) > Number(this.payInNum.max))) || (this.HasData(this.payInNum.min) && this.HasData(this.payInNum.max) && (Number(this.payInNum.min) === Number(this.payInNum.max)))) {
        this.Toast('Incorrect input interval');
      } else if ((this.HasData(this.payInNum.min) && this.HasData(this.payInNum.max)) && (!/^[0-9]\d*$/.test(this.payInNum.min) || !/^[1-9]\d*$/.test(this.payInNum.max))) {
        this.Toast('Please enter integer intervals.');
      } else if ((this.payInNum.min && this.payInNum.max) && ((this.isSameData.min === this.payInNum.min && this.isSameData.max === this.payInNum.max) || (this.isSameData1.min === this.payInNum.min && this.isSameData1.max === this.payInNum.max))) {
        return false;
      } else {
        this.list = [];
        this.list1 = [];
        this.page = 1;
        this.page1 = 1;
        this.getInfo();
      }
    },
    // Purchase interface
    buy (index) {
      this.axios.get('index/rename/rename_s').then(({data}) => {
        if (data.status === 201) {
          this.Modal('Real name authentication', 'You do not have real name authentication yet, Please go to the certification first', 'To authenticate', () => {
            this.$router.push('certification');
          });
        } else if (data.status === 200) {
          this.axios.post('index/present/presenthall/diya').then(({data}) => {
            if (data.status === 200) {
              this.Modal('Tips', 'When buying a spot, it will be seized in advance.100As the margin, the order will be refunded after completion of the order', ['cancel', 'Sure'], () => {
                if (this.optionsSelect === 0) {
                  this.$router.push({path: 'buyDetail', query: {id: this.list[index].id}});
                }
                if (this.optionsSelect === 1) {
                  this.$router.push({path: 'buyDetail', query: {id: this.list1[index].id}});
                }
              });
            } else {
              this.Modal('Tips', 'Your current account balance is not satisfactory.100No deposit can be withheld, and no cash point can be purchased', 'Sure');
            }
          });
        }
      });
    },
    // List interface (time does not coexist with integrity. Just entering pages is time sequencing).
    getInfo () {
      this.canRequest = false;
      this.reqTime();
      this.canRequest1 = false;
      this.reqFaith();
    },
    // Time interface
    reqTime () {
      this.canRequest = false;
      this.axios.post('index/present/presenthall/sell_hall', {
        page: this.page, // paging
        rate: this.ind, // Country
        type: 1, // time
        // Integrity (empty)
        num: this.payInNum.min, // Interval small
        nax: this.payInNum.max // Interval large
        // Interval (empty)
      }).then(({data}) => {
        this.isRequest = true;
        if (data.status === 200) {
          this.canRequest = true;
          this.isSameData.min = this.payInNum.min;
          this.isSameData.max = this.payInNum.max;
          this.page++;
          let resObj;
          resObj = data.data;
          if (resObj.length < 10 || !resObj.length || !resObj) {
            this.hasMoreData = false;
          } else {
            this.hasMoreData = true;
          }
          this.list = this.list.concat(resObj);
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Integrity interface
    reqFaith () {
      this.canRequest1 = false;
      this.axios.post('index/present/presenthall/sell_hall', {
        page: this.page1, // paging
        rate: this.ind, // Country
        // time(Empty)
        purse: 1, // Sincerity
        num: this.payInNum.min, // Interval small
        nax: this.payInNum.max // Interval large
        // Interval (empty)
      }).then(({data}) => {
        this.isRequest1 = true;
        if (data.status === 200) {
          this.canRequest1 = true;
          this.isSameData1.min = this.payInNum.min;
          this.isSameData1.max = this.payInNum.max;
          this.page1++;
          let resObj;
          resObj = data.data;
          if (resObj.length < 10 || !resObj.length || !resObj) {
            this.hasMoreData1 = false;
          } else {
            this.hasMoreData1 = true;
          }
          this.list1 = this.list1.concat(resObj);
        } else {
          this.Toast(data.message);
        }
      });
    }
  },
  mounted () {
    this.$refs.scrollBox.onscroll = (e) => {
      let bottomClient = this.$refs.scrollBoxInner.clientHeight - e.target.scrollTop - e.target.clientHeight;
      if (bottomClient < 50 && this.canRequest && this.hasMoreData && this.optionsSelect === 0) {
        this.canRequest = false;
        this.page = 2;
        this.reqTime();
      };
      if (bottomClient < 50 && this.canRequest1 && this.hasMoreData1 && this.optionsSelect === 1) {
        this.canRequest1 = false;
        this.page = 2;
        this.reqFaith();
      };
    };
    this.getInfo();
  },
  props: [
    'lang',
    'ind'
  ]
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .buyIn_wrap{
    box-sizing: border-box;
    height:100%;
    padding-top: 177px;
    background: #f4f5f7;
    position: relative;
    .top {
      position: fixed;
      top: 177px;
      left: 0;
      width: 100%;
      z-index:10;
      margin-bottom: 10px;
      background: #f4f5f7;
      .options {
        height: 90px;
        text-align: center;
        color: #999;
        overflow: hidden;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 24px;
        .condition {
          // width: 12%;
          height: 100%;
          line-height: 90px;
          color: #999;
          &.select {
            color: #608af9;
          }
          .iconfont {
            font-size: 24px;
            // padding-left: 10px;
            transition: all .5s;
            display: inline-block;
          }
          // screen
          &.filter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 56%;
            .number_txt {
              display: inline-block;
              padding-right: 2%;
            }
            .pay_num {
              // width: 70%;
              display: flex;
              justify-content: flex-start;;
              align-items: center;
              .pay_num_line {
                padding: 0 5px;
                color: #999999;
              }
              input {
                width: 98px;
                height: 47px;
                line-height: 47px;
                border-radius: 10px;
                background: #fff;
                text-align: center;
                font-size: 24px;
                color: #222;
                border: 1Px solid #e6e6e6;
                &::placeholder {
                  font-size: 24px;
                  color: #999999;
                  text-align: center;
                }
              }
              .search {
                width: 100px;
                height: 47px;
                line-height: 47px;
                border-radius: 10px;
                text-align: center;
                font-size: 24px;
                color: #999999;
                background: #e6eaf5;
                margin-left: 10px;
                border: 1Px solid #e6e6e6;
              }
            }
          }
        }
      }
    }
    // list
    .list_wrap {
      width: 100%;
      height: calc(100% - 87px);
      padding: 0 28px;
      margin-top: 87px;
      overflow-y: scroll;
      position: relative;
        .item_box {
          background: #fff;
          border-radius: 15px;
          box-shadow: 0px 0px 10px 10px #eff0f2;
          margin-bottom: 20px;
          .item_top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1Px solid #e6e6e6;
            padding: 0 30px;
            height: 94px;
            .top_left {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .img_wrap {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 67px;
                height: 67px;
                border-radius: 50%;
                margin-right: 18px;
                img {
                  border-radius: 50%;
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          .content_wrap {
            height: 148px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 24px;
            color: #999999;
            div {
              text-align: center;
              p {
                margin-bottom: 16px;
              }
              .price {
                color: #fe6e3a;
                font-size: 30px;
                font-weight: 600;
              }
              .level {
                font-size: 30px;
                color: #666666;
              }
            }
          }
        }
        .public_none_data {
            position: absolute;
            left: 0;
            right: 0;
            top: 20%;
            bottom: 0;
            margin: auto;
          }
    }
  }
</style>
